Container Components

在 React 模式上对我的代码有最深远影响的一个模式叫 container component 模式。

在 React.js Conf 上，Jason Bonta 和我们讲了他们在Facebook上是如何建立高性能组件（High Performance Components）。Nestled 在这个演讲中讲的就是 this gem about container components。

这个概念很简单：

一个 container 只是做数据拉取然后渲染与它的 corresponding 子组件。就是这样。

“Corresponding” 意味着分享同一个名称的组件，例如：

1	StockWidgetContainer => StockWidget TagCloudContainer => TagCloud PartyPooperListContainer => PartyPooperList

这就是其中的概念。

Why containers?

比如你有一个用于展示评论的组件。你并不知道有关 container 组件。所以，你会将所有东西都放在一个地方。

//  CommentList.js

class CommentList extends React.Component {
    constructor(){
        super();
        this.state = { comments: []}
    }

    componentDidMount(){
        $.ajax({
            url: "/my-comments.json",
            dataType: 'json',
            success: function(comments){
                this.setState({comments});
            }.bind(this)
        });
    }

    render(){
        return <ul> {this.state.comments.map(renderComponent)} </ul>;
    }

    renderComponent({body, author}){
        return <li> {body}-{author} </li>;
    }
}

你的组件就是用于拉取数据并展示它。这并没有什么”错误”，但是你却错过了一些React的优点。

可复用性

CommentList组件除了在同一精确的条件情况下才能复用。

数据结构

你希望的组件应该规定他们需要的数据类型的预期。PropTypes正是干这个的。

我们的组件对数据结构要求很高但是没有办法说出这些要求。如果json的接口数据改变了，这个组件会不做出任何提示出错。（其实想说的就是，无法好好利用PropTypes来把控数据结构是否正确）

再来一次。这一次加上container

首先，让我们将数据拉取的功能移到 container 组件上。

// CommentListContainer.js

class CommentListContainer extends React.Component{
    constructor(){
        super();
        this.state = { comments: [] }
    }

    componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: 'json',
      success: function(comments) {
        this.setState({comments: comments});
      }.bind(this)
    });
  }

  render() {
    return <CommentList comments={this.state.comments} />;
  }
}

现在，我们将comments作为CommentList的prop重制一遍。

// CommentList.js

class CommentList extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return <ul> {this.props.comments.map(renderComment)} </ul>;
    }
    renderComment({body, author}) {
        return <li>{body}—{author}</li>;
    }
}

最后，我们得到了什么？

我们实际上得到了很多…

我们分开了我们的数据拉取和渲染的关注点。

我们使我们的CommentList组件可以复用了。

我们可以让CommentList有能力使用PropTypes并且一旦出错便会提示。

我是一个 container components 的大粉丝。他们让我的 React game 进步了很多，并且使我的组件更容易去阅读。尝试一下他们，并看一下Jason的演讲。太棒了！

Carry on, nerds.

Yika J's Blog

(翻译)Container Components